<template>
	<view class="content">
		<f-navbar title="我的订单" fontColor="#333" fontSize="34" bgColor="#fff">
			<view class="u-flex" slot="left">
				<van-icon name="arrow-left" color="#333" size="20" />
			</view>
		</f-navbar>
		<view class="content_box">
			<view class="content_search">
				<view class="search_box">
					<image class="search-icon" src="../../../static/imgs/search_icon.png" mode=""></image>
					<input type="text" :value="searchvalue" @input="onsearch" class="search_input"
						placeholder-class="place_class" placeholder="输入商品名称、客户名、手机号进行检索">
					<view class="search_btn" @click="searchorder">
						搜索
					</view>
				</view>
			</view>
			<view class="search1">

			</view>
			<view class="content_tabs">
				<van-tabs :active="active" @change="onchange" :sticky="true" :offset-top="navHeight"
					custom-class="custom_tabs" tab-active-class="class_active" type="none" :nav-class="nav_class"
					title-active-color="#EE0E6B" title-inactive-color="#000000" swipe-threshold="5.3">
					<van-tab title="待发货" name="2"
						title-style="font-size:28rpx; text-align:center;height:62rpx;line-height:62rpx">
						<scroll-view @scrolltolower="lowerBottom" scroll-y="true" class="scrollHeight"
							:style="{marginTop:0+'rpx'}" :scroll-top="scrollTop" :refresher-threshold="100"
							:refresher-triggered="triggered" :scroll-with-animation="true">
							<view class="info_box">
								<view class="content_item" @click="onstoreOrderDetail(item)"
									v-for="(item,index) in dataList" :key="index">
									<view class="content_itemtop">
										<view class="content_itemtopL">
											<!-- <view class="content_itemtopLimg"> -->
											<image class="content_itemtopLimg" :src="imgurl+'shop_icon.png'" mode="">
											</image>
											<!-- </view> -->
											<view class="content_itemtopLname">{{item.store_name}}</view>
											<van-icon name="arrow" size="16" color="#bbb" />
										</view>
										<view class="content_itemtopR">等待发货</view>
									</view>
									<view class="content_shopbox">
										<view class="content_shopboxone" v-for="(shopitem,shopindex) in item.item"
											:key="shopindex">
											<view class="content_shopimg">
												<image class="content_shopimgone" :src="shopitem.good_item_img" mode="">
												</image>
											</view>
											<view class="content_shopR">
												<view class="content_shopRtxt">
													<view class="content_shopRtxtL">
														{{shopitem.title}}
													</view>
													<view class="content_shopRtxtprice">￥{{shopitem.tree_price}}</view>
												</view>
												<view class="content_shopguige">
													<view class="content_shopguigeL">{{shopitem.spec_title}}</view>
													<view class="content_shopguigenum">*{{shopitem.buy_num}}</view>
												</view>

											</view>

										</view>
										<view class="content_heji">合计：<text class="priceicon">￥</text><text
												class="price">{{item.total_free}}</text></view>

									</view>
									<!-- <view class="fengexian"> -->
									<image class="fengexianicon" :src="imgurl+'fengexian.png'" mode=""></image>
									<!-- </view> -->
									<view class="nameinfo_box">
										<view class="name_box">
											{{item.receive_name}} &nbsp;&nbsp;&nbsp;{{item.receive_phone}}
										</view>
										<image class="phone_icon" @click.stop="onphone(item.receive_phone)"
											:src="imgurl+'phone_icon.png'" mode=""></image>
										<view class="phonetxt" @click.stop="onphone(item.receive_phone)">
											联系他
										</view>
									</view>
									<view class="address_box">
										地址:{{item.receive_full_address}}
									</view>
									<view class="bottom_btn" @click.stop="onkuaidi(item)">
										确认发货
									</view>


								</view>

							</view>
						</scroll-view>
					</van-tab>
					<van-tab title="待收货" name="3"
						title-style="font-size:28rpx; text-align:center;height:62rpx;line-height:62rpx">
						<scroll-view @scrolltolower="lowerBottom" scroll-y="true" class="scrollHeight"
							:style="{marginTop:0+'rpx'}" :scroll-top="scrollTop" :refresher-threshold="100"
							:refresher-triggered="triggered" :scroll-with-animation="true">
							<view class="info_box">
								<view class="content_item" @click="onstoreOrderDetail(item)"
									v-for="(item,index) in dataList" :key="index">
									<view class="content_itemtop1">
										<view class="content_itemtopL">
											<!-- <view class="content_itemtopLimg"> -->
											<image class="content_itemtopLimg" :src="imgurl+'shop_icon.png'" mode="">
											</image>
											<!-- </view> -->
											<view class="content_itemtopLname">{{item.store_name}}</view>
											<van-icon name="arrow" size="16" color="#bbb" />
										</view>
										<view class="content_itemtopR1">等待收货</view>
									</view>
									<view class="kuaidi_info">
										<!-- <view class="kuaidi_img"> -->
										<image class="kuaidi_img" :src="imgurl+'kuaidi_icon.png'" mode=""></image>
										<!-- </view> -->
										<view class="kuaidi_title">{{item.express_company}}</view>
										<view class="kuaidi_oddnum">{{item.express_number}}</view>
									</view>
									<view class="content_shopbox">
										<view class="content_shopboxone" v-for="(shopitem,shopindex) in item.item"
											:key="shopindex">


											<view class="content_shopimg">
												<image class="content_shopimgone" :src="shopitem.good_item_img" mode="">
												</image>
											</view>
											<view class="content_shopR">
												<view class="content_shopRtxt">
													<view class="content_shopRtxtL">
														{{shopitem.title}}
													</view>
													<view class="content_shopRtxtprice">￥{{shopitem.tree_price}}</view>
												</view>
												<view class="content_shopguige">
													<view class="content_shopguigeL">{{shopitem.spec_title}}</view>
													<view class="content_shopguigenum">*{{shopitem.buy_num}}</view>
												</view>
												<view class="content_heji">合计：<text class="priceicon">￥</text><text
														class="price">{{item.total_free}}</text></view>
											</view>
										</view>
									</view>
									<view class="content_bottombox">

										<view class="content_bottomboxSH">查看详情</view>

									</view>
								</view>

							</view>
						</scroll-view>
					</van-tab>
					<van-tab title="已完成" name="4"
						title-style="font-size:28rpx; text-align:center;height:62rpx;line-height:62rpx">
						<scroll-view @scrolltolower="lowerBottom" scroll-y="true" class="scrollHeight"
							:style="{marginTop:0+'rpx'}" :scroll-top="scrollTop" :refresher-threshold="100"
							:refresher-triggered="triggered" :scroll-with-animation="true">
							<view class="info_box">
								<view class="content_item" @click="onstoreOrderDetail(item)"
									v-for="(item,index) in dataList" :key="index">
									<view class="content_itemtop1">
										<view class="content_itemtopL">
											<!-- <view class="content_itemtopLimg"> -->
											<image class="content_itemtopLimg" :src="imgurl+'shop_icon.png'" mode="">
											</image>
											<!-- </view> -->
											<view class="content_itemtopLname">{{item.store_name}}</view>
											<van-icon name="arrow" size="16" color="#bbb" />
										</view>
										<view class="content_itemtopR1">已完成</view>
									</view>
									<!-- 								<view class="kuaidi_info">
									<image class="kuaidi_img" :src="imgurl+'kuaidi_icon.png'" mode=""></image>
									<view class="kuaidi_title">申通快递</view>
									<view class="kuaidi_oddnum">773224766304825</view>
								</view> -->
									<view class="content_shopbox">
										<view class="content_shopboxone" v-for="(shopitem,shopindex) in item.item"
											:key="shopindex">


											<view class="content_shopimg">
												<image class="content_shopimgone" :src="shopitem.good_item_img" mode="">
												</image>
											</view>
											<view class="content_shopR">
												<view class="content_shopRtxt">
													<view class="content_shopRtxtL">
														{{shopitem.title}}
													</view>
													<view class="content_shopRtxtprice">￥{{shopitem.tree_price}}</view>
												</view>
												<view class="content_shopguige">
													<view class="content_shopguigeL">{{shopitem.spec_title}}</view>
													<view class="content_shopguigenum">*{{shopitem.buy_num}}</view>
												</view>
												<view class="content_heji">合计：<text class="priceicon">￥</text><text
														class="price">{{item.total_free}}</text></view>
											</view>
										</view>
									</view>
									<view class="content_bottombox">

										<!-- <view class="content_bottomboxSH">确认完成</view> -->

									</view>
								</view>
							</view>
						</scroll-view>
					</van-tab>
					<van-tab title="售后" name="5"
						title-style="font-size:28rpx; text-align:center;height:62rpx;line-height:62rpx">
					</van-tab>

				</van-tabs>

			</view>
			<!-- 快递弹窗 -->
			<van-popup :show="iskuaidi" z-index="999" closeable round :close-on-click-overlay="true" position="bottom"
				@close="onClosekuaidi">
				<view class="kuaidi_box">
					<view class="kuaidi_item">
						<view class="kuaidi_itemL">
							姓名
						</view>
						<view class="kuaidi_itemR">
							{{dataobj.receive_name}}
						</view>
					</view>
					<view class="kuaidi_line"></view>
					<view class="kuaidi_item">
						<view class="kuaidi_itemL">
							手机号
						</view>
						<view class="kuaidi_itemR">
							{{dataobj.receive_phone}}
						</view>
					</view>
					<view class="kuaidi_line"></view>
					<view class="kuaidi_item1">
						<view class="kuaidi_itemL1">
							地址
						</view>
						<view class="kuaidi_itemR">
							{{dataobj.receive_full_address}}
						</view>
					</view>
					<view class="kuaidi_line"></view>
					<view class="kuaidi_item">
						<view class="kuaidi_itemL">
							快递名称
						</view>
						<input class="we_ui" :value="expressname" @input="onexpressname" type="text"
							placeholder="请输入所发快递名称" placeholder-class="placlass">
					</view>
					<view class="kuaidi_line"></view>
					<view class="kuaidi_item">
						<view class="kuaidi_itemL">
							快递单号
						</view>
						<input class="we_ui" :value="expressnum" @input="ononexpressnum" type="text"
							placeholder="请输入快递单号" placeholder-class="placlass">
					</view>
					<view class="kuaidi_line"></view>
					<view class="uploadkuaidi_box">
						<view class="uploadkuaidi" @click="onuploadimg">
							<image class="cameraicon" :src="imgurl+'zhaoxiangjiicon.png'" mode=""></image>
							上传单号
						</view>
						<view class="uploadkuaidi1" v-if="expressimg!==''">
							<image class="upload_close" @click="deleteexpressimg" :src="imgurl+'upload_close.png.png'"
								mode=""></image>
							<image class="express_img" :src="expressimg" mode=""></image>
						</view>
					</view>
					<view class="bottomsubmit1" @click="onfahuo">
						确认发货
					</view>
				</view>
			</van-popup>

		</view>
	</view>
</template>

<script>
	import fNavbar from '@/uni_modules/f-navbar/components/f-navbar/f-navbar.vue';
	import {
		getStoreOrderList,
		sendGood
	} from '../../../utils/storeapp.js'
	export default {
		components: {
			fNavbar
		},
		data() {
			return {
				active: '2',
				imgurl: getApp().globalData.imgurl,
				apiUrl: getApp().globalData.apiUrl,
				searchvalue: '', // 搜索框输入
				navHeight: 0,
				pages: 1, // 分页数据
				PageSize: 4, // 一页有多少数据
				total: null, // 总条数	
				dataList: [], // 列表数据
				triggered: false, // 设置是否下拉
				iskuaidi: false, //打开快递弹窗
				dataobj: {}, // 确认发货收到的数据
				orderNo: '', // 订单号
				expressname: '', // 快递名称
				expressnum: '', //快递单号
				expressimg: '', // 快递单图片
			}
		},
		onLoad(options) {
			this.active = options.id
			this.getheight()
			this.getList(true)
		},
		onShow() {
			// this.active = 2
			this.getList(true)
		},
		methods: {
			// 联系电话
			onphone(e) {
				// console.log(e);
				uni.makePhoneCall({
					phoneNumber: e, //此号码仅用于测试
					success: function() {
						console.log("拨打电话成功！")
					},
					fail: function() {
						console.log("拨打电话失败！")
					}
				})
			},
			// 搜索
			searchorder() {
				this.getList(true)
			},
			// 确认发货
			onfahuo() {
				sendGood({
					order_no: this.dataobj.order_no,
					express_name: this.expressname,
					express_number: this.expressnum,
					express_img: this.expressimg
				}).then(res => {
					console.log(res);
					// this.dataobj = res.data
					if (res.code == 1) {
						this.iskuaidi = false
						this.getList(true)
					} else {
						uni.showToast({
							title: res.info,
							icon: 'none',
							duration: 2000
						})
					}

				})
			},
			// 输入快递名称
			onexpressname(e) {
				console.log(e);
				this.expressname = e.detail.value
			},
			//输入快递单号
			ononexpressnum(e) {
				this.expressnum = e.detail.value
			},
			// 关闭快递按钮
			onClosekuaidi() {
				this.iskuaidi = false
			},


			// 打开快递弹窗
			onkuaidi(e) {
				console.log(e);
				this.dataobj = e
				this.iskuaidi = true
				this.expressname = ''
				this.expressnum = ''
				this.expressimg = ''
			},
			// 删除快递单号图片
			deleteexpressimg() {
				this.expressimg = ''
			},
			// 上传快递单号图片
			onuploadimg() {
				uni.chooseImage({
					sourceType: ['camera', 'album'], //从相册选择
					success: chooseImageRes => {
						console.log('成功', chooseImageRes);
						const tempFilePaths = chooseImageRes.tempFilePaths[0];
						console.log(tempFilePaths);
						// this.avatarimg = tempFilePaths
						uni.uploadFile({
							url: this.apiUrl + 'api/uploadFile', //仅为示例，非真实的接口地址
							filePath: tempFilePaths,
							name: 'file',
							formData: {
								file: tempFilePaths,
								type: '1'
							},
							success: res => {
								console.log(res);
								let data1 = JSON.parse(res.data)
								console.log(data1);
								if (data1.code == 1) {
									this.expressimg = data1.data.url

								}
								// console.log('上传成功', JSON.parse(res.data));
								// uploadFile上传成功后，根据和后台的约定msgCode判断接口调用状态

							}
						});
					},
					// fail: err => {
					// 	this.myToast('图片上传失败', 'none');
					// }
				});

			},


			//触底加载
			lowerBottom() {
				// 判断是否还有下一页数据
				// if (this.pages * this.PageSize >= this.total) return person.showMoreData = true
				// 让页码值自增 +1
				// console.log('999');
				// this.pages += 1
				// 重新获取列表数据
				this.getList(false)
			},
			// 下拉刷新
			// getFresh() {
			// 	this.triggered = true,
			// 		this.getList(true)

			// },
			// 获取数据
			getList(isPullDownRefresh) {
				let currPage = 1
				if (!isPullDownRefresh) {
					currPage = this.pages + 1
				} else {
					currPage = 1
				}
				getStoreOrderList({
					type: this.active,
					title: this.searchvalue,
					page: currPage
				}).then(res => {
					// console.log(res);
					if (res.code == 1) {

						uni.hideToast()
						const newdata = res.data.list
						if (isPullDownRefresh) {
							this.dataList = newdata
							this.triggered = false
						} else {
							this.dataList = [...this.dataList, ...newdata]
						}
						this.pages = res.data.page.current
						// console.log(this.pages);
						// this.total = res.data.page.total
					} else {
						uni.showToast({
							title: res.info,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			// 跳转到商铺订单详情
			onstoreOrderDetail(e) {
				console.log(e);
				uni.navigateTo({
					url: '/pages/subPack/storeOrderDetail/storeOrderDetail?orderNo=' + e.order_no
				})
			},
			// 搜索框输入事件
			onsearch(e) {
				this.searchvalue = e.detail.value
			},
			getheight() {
				let menuButtonObject = uni.getMenuButtonBoundingClientRect(); //获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。
				// console.log(menuButtonObject);
				uni.getSystemInfo({ //获取系统信息
					success: res => {
						// console.log(res);
						let navHeight = menuButtonObject.height + (menuButtonObject.top - res
							.statusBarHeight) * 2 + res.statusBarHeight; //导航栏高度=菜单按钮高度+（菜单按钮与顶部距离-状态栏高度）*2
						// console.log(navHeight);
						this.navHeight = navHeight + 60;
						// this.statusBarHeight = res.statusBarHeight
					},
					fail(err) {
						console.log(err);
					}
				})
			},
			// 选择订单
			onchange(e) {
				// console.log(e.detail);
				// console.log(this.active);
				this.active = e.detail.name
				console.log(this.active);
				if (e.detail.name == 5) {
					uni.navigateTo({
						url: '/pages/subPack/AfterSales/AfterSales'
					})
				}
				this.getList(true)
			},
		},

	}
</script>

<style>
	page {
		background: #eee;
	}

	.content_search {
		width: 100%;
		height: 110rpx;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		z-index: 99;
	}

	.search_box {
		width: 691rpx;
		height: 65rpx;
		background: #FFFFFF;
		border: 1rpx solid #EF0E6C;
		border-radius: 32rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
	}

	.search_input {
		width: 480rpx;
		padding-left: 88rpx;
	}

	.search-icon {
		width: 36rpx;
		height: 36rpx;
		position: absolute;
		left: 30rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	.place_class {
		font-size: 24rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #BBBBBB;
	}

	.search_btn {
		width: 122rpx;
		height: 64rpx;
		background: #EF0E6C;
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #FFFFFF;
		line-height: 64rpx;
		text-align: center;
		border-top-right-radius: 32rpx;
		border-bottom-right-radius: 32rpx;
	}

	.search1 {
		height: 110rpx;
		z-index: 999;
	}

	.scrollHeight {
		height: 80vh;
	}



	.content_tabs {
		width: 100%;
		height: 62rpx;
		background: #fff;
		margin-top: 4rpx;
	}

	.class_active {
		font-size: 28rpx !important;
		font-family: Hiragino Sans GB;
		font-weight: bold !important;
		color: #EE0E6B;
	}

	.custom_tabs {
		position: fixed;
	}

	/deep/.van-tab--active {
		font-size: 36rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #EE0E6B;
		position: fixed;
	}

	.info_box {
		margin-top: 30rpx;
	}

	.content_item {
		width: 690rpx;
		/* height: 502rpx; */
		background: #FFFFFF;
		border-radius: 10rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		padding-bottom: 20rpx;
	}

	.content_itemtop {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-top: 18rpx;
	}

	.content_itemtop1 {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-top: 41rpx;
	}

	.content_itemtopL {
		display: flex;
		align-items: center;
	}

	.content_itemtopLimg {
		width: 32rpx;
		height: 29rpx;
		/* background: #000; */
		margin-left: 20rpx;
		margin-right: 10rpx;
	}

	.content_itemtopLname {
		font-size: 30rpx;
		font-family: Hiragino Sans GB;
		font-weight: 700;
		color: #333333;
		/* line-height: 55rpx; */
		margin-right: 20rpx;
	}

	.content_itemtopR {
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #00A0E9;
		line-height: 2rpx;
		margin-right: 22rpx;
	}

	.content_itemtopR1 {
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #FF7E00;
		line-height: 2rpx;
		margin-right: 22rpx;
	}

	.kuaidi_info {
		width: 650rpx;
		height: 70rpx;
		background: #EEEEEE;
		border-radius: 10rpx;
		margin: 0 auto;
		margin-top: 21rpx;
		margin-bottom: 30rpx;
		display: flex;
		align-items: center;
	}

	.kuaidi_img {
		width: 32rpx;
		height: 25rpx;
		/* background: #000; */
		margin-left: 21rpx;
	}

	.kuaidi_title {
		font-size: 24rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
		margin-left: 20rpx;
	}

	.kuaidi_oddnum {
		font-size: 24rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
		margin-left: 22rpx;
	}

	.content_shopbox {

		margin-top: 20rpx;
		margin-left: 20rpx;
	}

	.content_shopboxone {
		display: flex;
		align-items: center;
		margin-top: 20rpx;
	}

	.content_shopimg {
		width: 180rpx;
		height: 180rpx;
		/* background: #FF0000; */
		border-radius: 10rpx;
	}

	.content_shopimgone {
		width: 100%;
		height: 100%;
	}

	.content_shopR {
		margin-left: 20rpx;
		width: 66%;
	}

	.content_shopRtxt {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.content_shopRtxtL {
		width: 313rpx;
		/* height: 80rpx; */
		font-size: 24rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
		line-height: 42rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.content_shopRtxtprice {
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: 500;
		color: #333333;
		line-height: 40rpx;
	}

	.content_shopguige {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 29rpx;
	}

	.content_shopguigeL {
		width: 313rpx;
		font-size: 24rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #999999;
	}

	.content_shopguigenum {
		font-size: 24rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #999999;
	}

	.content_heji {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
		margin-top: 29rpx;
		margin-right: 30rpx;
		/* line-height: 40rpx; */
	}

	.priceicon {
		font-size: 24rpx;
		font-family: Hiragino Sans GB;
		font-weight: 700;
		color: #FF0000;
		/* line-height: 40rpx; */
	}

	.price {
		font-size: 30rpx;
		font-family: Hiragino Sans GB;
		font-weight: 700;
		color: #FF0000;
		/* line-height: 40rpx; */
	}

	.fengexian {
		width: 100%;
		height: 4rpx;
	}

	.fengexianicon {
		width: 100%;
		height: 4rpx;
	}

	.nameinfo_box {
		display: flex;
		align-items: center;
		margin-top: 18rpx;
		margin-left: 21rpx;
	}

	.name_box {
		font-size: 24rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
		line-height: 40rpx;
	}

	.phone_icon {
		width: 28rpx;
		height: 28rpx;
		margin-left: 19rpx;
		margin-right: 10rpx;
	}

	.phonetxt {
		font-size: 24rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #00A0E9;
	}

	.address_box {
		margin-left: 21rpx;
		margin-top: 12rpx;
		font-size: 24rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
		line-height: 40rpx;
	}

	.bottom_btn {
		width: 156rpx;
		height: 62rpx;
		border: 2rpx solid #EF0E6C;
		border-radius: 30rpx;
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #FF0000;
		line-height: 62rpx;
		text-align: center;
		margin: 0 auto;
		margin-top: 20rpx;
	}

	.content_bottombox {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin-top: 45rpx;
		/* margin-bottom: 50rpx; */
	}

	.content_bottomboxQX {
		width: 156rpx;
		height: 62rpx;
		border: 2rpx solid #bbb;
		box-sizing: border-box;
		border-radius: 30rpx;
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #bbb;
		line-height: 58rpx;
		text-align: center;
		margin-right: 20rpx;
	}

	.content_bottomboxSH {
		width: 156rpx;
		height: 62rpx;
		border: 2rpx solid #EF0E6C;
		box-sizing: border-box;
		border-radius: 30rpx;
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #EF0E6C;
		line-height: 58rpx;
		text-align: center;
		margin-right: 20rpx;
		margin-left: 18rpx;
	}

	.content_bottomboxbtn {
		width: 154rpx;
		height: 60rpx;
		background: #EF0E6C;
		border-radius: 30rpx;
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #FFFFFF;
		line-height: 60rpx;
		text-align: center;
		margin-right: 23rpx;
		margin-left: 18rpx;
	}

	.content_pingjia {
		width: 156rpx;
		height: 62rpx;
		border: 2rpx solid #EF0E6C;
		box-sizing: border-box;
		border-radius: 30rpx;
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #EF0E6C;
		line-height: 58rpx;
		text-align: center;
		margin-right: 20rpx;
		margin-left: 18rpx;
	}

	.kuaidi_box {
		width: 100%;
		min-height: 700rpx;
		background: #fff;
	}

	.kuaidi_item:first-child {
		margin-top: 110rpx;
	}

	.kuaidi_item {
		width: 690rpx;
		height: 88rpx;
		margin: 0 auto;

		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.kuaidi_itemL {
		margin-left: 20rpx;
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
	}

	.we_ui {
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
		text-align: right;
	}

	.placlass {
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #DDDDDD;
		line-height: 45rpx;
	}

	.kuaidi_itemR {
		width: 530rpx;
		margin-right: 20rpx;
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
		text-align: right;
	}

	.kuaidi_line {
		width: 690rpx;
		height: 2rpx;
		background: #EEEEEE;
		border-radius: 1rpx;
		margin: 0 auto;
	}

	.kuaidi_item1 {
		width: 690rpx;
		min-height: 134rpx;
		margin: 0 auto;

		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.kuaidi_itemL1 {
		margin-left: 20rpx;
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
		margin-bottom: 50rpx;
	}

	.uploadkuaidi_box {
		margin-top: 40rpx;
		margin-left: 52rpx;
		display: flex;
		align-items: center;

	}

	.uploadkuaidi {
		width: 93rpx;
		height: 93rpx;
		border: 1rpx solid #BBBBBB;
		border-radius: 10rpx;
		font-size: 20rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.uploadkuaidi1 {
		width: 92rpx;
		height: 92rpx;
		background: #EEEEEE;
		border-radius: 10rpx;
		margin-left: 20rpx;
		/* line-height: 45rpx; */
		position: relative;
	}

	.express_img {
		width: 100%;
		height: 100%;
	}

	.cameraicon {
		width: 32rpx;
		height: 29rpx;
		margin-bottom: 9rpx;
	}

	.upload_close {
		width: 19rpx;
		height: 19rpx;
		position: absolute;
		left: 4rpx;
		top: 4rpx;
	}

	/* 	.bottom_btn1{
		width: 692rpx;
		height: 90rpx;
		background: #eee;
		border-radius: 10rpx;
		margin: 0 auto;
		margin-top: 39rpx;
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333;
		line-height: 90rpx;
		text-align: center;
	}
	.bottom_btn_active1{
		background: #FFFFFF;
		border: 2rpx solid #EF0E6C;
		color: #EF0E6C;
	} */
	.bottomsubmit1 {
		width: 690rpx;
		height: 88rpx;
		background: #EF0E6C;
		border-radius: 10rpx;
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #FFFFFF;
		line-height: 88rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		text-align: center;
	}
</style>